<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>人员管理</title>
  <link rel="stylesheet" href="../../css/sysmgmt(系统管理-人员管理).css" />
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
  <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
  <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <div id="searchBox">
          <form class="form-inline">
            <div class="form-group">
              <input type="text" class="form-control" id="searchName" placeholder="请输入人员名称" />
            </div>
            <div class="form-group">
              <select id="searchGender" class="form-control">
                <option value="null">用户性别</option>
                <option value="0">男</option>
                <option value="1">女</option>
              </select>
            </div>
            <div class="form-group">
              <select id="searchType" class="form-control">
                <option value="0">人员类型</option>
                <option value="管理员">管理员</option>
                <option value="主治医生">主治医生</option>
                <option value="医生">医生</option>
                <option value="药师">药师</option>
              </select>
            </div>
          </form>
          <button class="btn btn-default" id="searchBtn">
            <span class="glyphicon glyphicon-search"></span> 查询
          </button>
          <button class="btn btn-default" id="reset">
            <span class="glyphicon glyphicon-repeat"></span> 清空
          </button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div id="optionBox">
          <button class="btn btn-default" id="append" data-toggle="modal" data-target="#appendDiv">
            + 新增人员
          </button>
          <button class="btn btn-default" id="export">
            <span class="glyphicon glyphicon-open"></span> 导出
          </button>
          <button class="btn btn-default" id="import">
            <span class="glyphicon glyphicon-save"></span> 导入
          </button>
          <button class="btn btn-default" id="searchdel">
            <span class="glyphicon glyphicon-trash"></span> 删除
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <table id="table" class="table table-hover">
          <thead>
            <tr>
              <td>
                <input type="checkbox" id="inlineCheckbox1" value="option1" />
                ID
              </td>
              <td>人员名称</td>
              <td>人员头像</td>
              <td>人员性别</td>
              <td>人员类型</td>
              <td>联系方式</td>
              <td>组织部门</td>
              <td>创建时间</td>
              <td>启用状态</td>
              <td>操作</td>
            </tr>
          </thead>

          <tbody id="tableBox">
            <!-- 数据渲染在这 -->
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div id="pageBox">
          <span>共<span id="totPage"></span><span>条</span></span>
          <select id="selectShowPageNum" class="form-control">
            <option value="0">10条/页</option>
            <option value="1">20条/页</option>
            <option value="2">50条/页</option>
          </select>
          <span id="prePage" class="glyphicon glyphicon-chevron-left"></span>
          <span id="pageDiv">
            <!-- 页码渲染在这里 -->
          </span>
          <span id="nextPage" class="glyphicon glyphicon-chevron-right"></span>
          <span>前往
            <input type="text" id="goPageNum" class="form-control" /><span>
              页</span></span>
          <span id="goPage">跳转</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 增加模态框 -->
  <div class="modal fade" id="appendDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="exampleModalLabel">新增人员</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-id" class="control-label">ID</label>
              <input type="text" class="form-control" id="id" required/>
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">人员名称</label>
              <input type="text" class="form-control" id="name" />
            </div>
            <div class="form-group">
              <label class="control-label">性别</label>
              <div>
                <label>
                  <input type="radio" name="sex" id="optionsRadios1" value="0" />
                  男
                </label>
                <label>
                  <input type="radio" name="sex" id="optionsRadios2" value="1" />
                  女
                </label>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label">人员类型</label>
              <select id="zhiwei" class="form-control">
                <option value="0">类型</option>
                <option value="管理员">管理员</option>
                <option value="主治医生">主治医生</option>
                <option value="医生">医生</option>
                <option value="药师">药师</option>
              </select>
            </div>
            <div class="form-group">
              <label for="recipient-phone" class="control-label">联系方式</label>
              <input type="text" class="form-control" id="phone" />
            </div>
            <div class="form-group">
              <label class="control-label">组织部门</label>
              <select id="dept" class="form-control">
                <option value="0">部门</option>
                <option value="总部">总部</option>
                <option value="研发部">研发部</option>
                <option value="市场部">市场部</option>
                <option value="服务部">服务部</option>
                <option value="客服部">客服部</option>
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button type="button" id="save" class="btn btn-primary">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 删除模态框 -->
  <div class="modal fade" id="delDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          确认删除后，人员将被彻底删除，是否确认删除？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button type="button" id="del" class="btn btn-primary">删除</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改模态框 -->
  <div class="modal fade" id="xiugaiDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="exampleModalLabel">修改</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-id" class="control-label">ID</label>
              <input type="text" class="form-control" id="id" />
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">人员名称</label>
              <input type="text" class="form-control" id="name" />
            </div>
            <div class="form-group">
              <label class="control-label">性别</label>
              <div>
                <label>
                  <input type="radio" id="male" name="sex" id="optionsRadios1" value="0" />
                  男
                </label>
                <label>
                  <input type="radio" id="female" name="sex" id="optionsRadios2" value="1" />
                  女
                </label>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label">人员类型</label>
              <select id="zhiwei" class="form-control">
                <option value="0">类型</option>
                <option value="管理员">管理员</option>
                <option value="主治医生">主治医生</option>
                <option value="医生">医生</option>
                <option value="药师">药师</option>
              </select>
            </div>
            <div class="form-group">
              <label for="recipient-phone" class="control-label">联系方式</label>
              <input type="text" class="form-control" id="phone" />
            </div>
            <div class="form-group">
              <label class="control-label">组织部门</label>
              <select id="dept" class="form-control">
                <option value="0">部门</option>
                <option value="总部">总部</option>
                <option value="研发部">研发部</option>
                <option value="市场部">市场部</option>
                <option value="服务部">服务部</option>
                <option value="客服部">客服部</option>
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button type="button" id="xiugai" class="btn btn-primary">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 模拟数据
    let arr = [
      {
        id: 1,
        name: "Mr.A",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "管理员",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 2,
        name: "Miss.A",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "主治医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 3,
        name: "Mr.B",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "管理员",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 4,
        name: "Miss.B",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "药师",
        contact: "18868803516",
        dept: "市场部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 5,
        name: "Mr.C",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "管理员",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 6,
        name: "Miss.C",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "主治医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 7,
        name: "Mr.D",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "服务部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 8,
        name: "Miss.D",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "药师",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 9,
        name: "Mr.E",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "药师",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 10,
        name: "Miss.E",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 11,
        name: "Mr.F",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 12,
        name: "Miss.F",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "主治医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 13,
        name: "Mr.G",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 14,
        name: "Mr.H",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 15,
        name: "Mr.I",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 16,
        name: "Miss.I",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 17,
        name: "Mr.J",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 18,
        name: "Mr.K",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 19,
        name: "Mr.L",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 20,
        name: "Mr.M",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 21,
        name: "Mr.N",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 22,
        name: "Mr.O",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 23,
        name: "Mr.P",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 24,
        name: "Mr.Q",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 25,
        name: "Mr.R",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 26,
        name: "Mr.S",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 27,
        name: "Mr.T",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 28,
        name: "Mr.U",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 29,
        name: "Mr.V",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 30,
        name: "Mr.W",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 31,
        name: "Mr.X",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 32,
        name: "Mr.Y",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 33,
        name: "Mr.Z",
        icon: "glyphicon glyphicon-user",
        gender: 0,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 34,
        name: "Miss.J",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 35,
        name: "Miss.K",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 36,
        name: "Miss.L",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 37,
        name: "Miss.M",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 38,
        name: "Miss.N",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 39,
        name: "Miss.O",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 40,
        name: "Miss.P",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 41,
        name: "Miss.Q",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 42,
        name: "Miss.R",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 43,
        name: "Miss.S",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 44,
        name: "Miss.T",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 45,
        name: "Miss.U",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 46,
        name: "Miss.V",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 47,
        name: "Miss.W",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 48,
        name: "Miss.X",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 49,
        name: "Miss.Y",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 50,
        name: "Miss.Z",
        icon: "glyphicon glyphicon-user",
        gender: 1,
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
    ];

    // 初始化
    let showArr = [];
    let presentPage = 1;
    let presentData = [];
    let maxPage;
    let showPageNum = 10;
    let delId;
    // 时间
    let time = new Date();
    let year = time.getFullYear();
    let month = time.getMonth() + 1;
    let date = time.getDate();
    let hour = time.getHours();
    let minute = time.getMinutes();
    let second = time.getSeconds();
    let presentTime =
      year +
      "-" +
      month +
      "-" +
      date +
      " " +
      +hour +
      ":" +
      minute +
      ":" +
      second;
    resetPage();

    // 渲染表格数据
    function show(data) {
      $("#tableBox").html("");
      for (let i = 0; i < data.length; i++) {
        $("#tableBox").append(`
      <tr>
          <td><input type="checkbox" id="inlineCheckbox1" value="option1"> ${data[i].id
          }</td>  
          <td>${data[i].name}</td>  
          <td><span class='${data[i].icon}'></span></td>
          <td>${data[i].gender == 0 ? "男" : "女"}</td>  
          <td>${data[i].zhiwei}</td>  
          <td>${data[i].contact}</td>  
          <td>${data[i].dept}</td> 
          <td>${data[i].creTime}</td> 
          <td>${data[i].switch == 1
            ? '<input class="switch-btn switch-btn-animbg" type="checkbox" checked>'
            : "0"
          }</td>
          <td>
            <a data-toggle="modal" data-target="#delDiv"
                  data-whatever="@mdo" id = 'delbtn' onclick = 'getDelId(${data[i].id
          })'>删除</a>
                  <a data-toggle="modal" data-target="#xiugaiDiv"
                  data-whatever="@mdo" id = 'xgbtn' onclick = 'xiugaiDefault(${JSON.stringify(
            data[i]
          )})'>修改</a>
          </td>  
      </tr>`);
      }
    }

    // 切割并为show提供数据
    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * showPageNum;
      presentData = data.slice(qishi, qishi + showPageNum);
      show(presentData);
      $("#totPage").text(showArr.length);
      $("#pageDiv .btn-default")
        .eq(pageNum - 1)
        .addClass("active")
        .siblings()
        .removeClass("active");
      presentPage = pageNum;
    }

    // 渲染页码
    function showPage(data) {
      maxPage = Math.ceil(data.length / showPageNum);
      $("#pageDiv").html("");
      for (let i = 1; i <= maxPage; i++) {
        $("#pageDiv").append(`<span class="btn btn-default">${i}</span>`);
      }

      // 重置按钮
      $("#reset").click(function () {
        resetPage();
      });
    }
    // 初始和重置页面功能,以及清空按钮
    function resetPage() {
      $("#searchName").val("");
      $("#searchGender").val("null");
      $("#searchType").val("0");
      showArr = [...arr];
      showPage(showArr);
      showData(showArr, 1);
    }

    // 跳转
    $("#pageDiv").on("click", ".btn-default", function () {
      showData(showArr, parseInt($(this).text()));
    });

    // 上一页
    $("#prePage").click(function () {
      if (presentPage > 1) {
        let shangyiye = presentPage - 1;
        showData(showArr, shangyiye);
      }
    });

    // 下一页
    $("#nextPage").click(function () {
      if (presentPage < maxPage) {
        let xiayiye = presentPage + 1;
        showData(showArr, xiayiye);
      }
    });
    // ================================查询====================================
    $("#searchBtn").click(function () {
      let searchName = $("#searchName").val();
      let searchGender = $("#searchGender").val();
      let searchType = $("#searchType").val();

      showArr = [...arr];
      if (searchName != "") {
        for (let i = 0; i < showArr.length; i++) {
          if (showArr[i].name != searchName) {
            showArr.splice(i, 1);
            i--;
          }
        }
      }

      if (searchGender != 'null') {
        for (let i = 0; i < showArr.length; i++) {
          if (showArr[i].gender != searchGender) {
            showArr.splice(i, 1);
            i--;
          }
        }
      }

      if (searchType != 0) {
        for (let i = 0; i < showArr.length; i++) {
          if (showArr[i].zhiwei != searchType) {
            showArr.splice(i, 1);
            i--;
          }
        }
      }
        showPage(showArr);
        showData(showArr, 1);
      }
    );

    // ================================新增人员================================
    $("#save").on("click", function () {
      let peopleObj = {
        id: $("#appendDiv").find(".modal-body #id").val(),
        name: $("#appendDiv").find(".modal-body #name").val(),
        gender: $("#appendDiv").find("input[name=sex]:checked").val(),
        zhiwei: $("#appendDiv").find("#type option:selected").val(),
        contact: $("#appendDiv").find(".modal-body #phone").val(),
        creTime: presentTime,
        switch: 1,
        dept: $("#appendDiv").find("#dept option:selected").val(),
      };

      // 重新渲染
      arr.push(peopleObj);
      showArr.push(peopleObj);
      showPage(showArr);
      showData(showArr, maxPage);

      // 隐藏添加模态框
      $("#appendDiv").modal("hide");
    });

    // ================================删除人员================================
    function getDelId(id) {
      delId = id;
    }

    $("#del").click(function () {

      for (let i = 0; i < showArr.length; i++) {
        if (showArr[i].id == delId) {
          showArr.splice(i, 1);
        }
      }
      $("#delDiv").modal("hide");
      showPage(showArr);
      showData(showArr, 1);
    });

    // ================================修改人员================================
    function xiugaiDefault(stuObj) {
      $("#xiugaiDiv")
        .find(".modal-body #id")
        .val("" + stuObj.id + "");
      $("#xiugaiDiv")
        .find(".modal-body #name")
        .val("" + stuObj.name + "");
      stuObj.gender == 0
        ? $("#male").prop("checked", true)
        : $("#female").prop("checked", true);
      $("#xiugaiDiv")
        .find(".modal-body #zhiwei")
        .val("" + stuObj.zhiwei + "");
      $("#xiugaiDiv")
        .find(".modal-body #phone")
        .val("" + stuObj.contact + "");
      $("#xiugaiDiv")
        .find(".modal-body #dept")
        .val("" + stuObj.dept + "");
    }

    $("#xiugai").click(function () {
      let stuObj = {
        id: $("#xiugaiDiv").find(".modal-body #id").val(),
        name: $("#xiugaiDiv").find(".modal-body #name").val(),
        icon: "glyphicon glyphicon-user",
        gender: $("#xiugaiDiv").find("input[name=sex]:checked").val(),
        zhiwei: $("#xiugaiDiv").find("#zhiwei option:selected").val(),
        contact: $("#xiugaiDiv").find(".modal-body #phone").val(),
        dept: $("#xiugaiDiv").find("#dept option:selected").val(),
        switch: 1,
        creTime: presentTime,
      };

      for (let i = 0; i < showArr.length; i++) {
        if (stuObj.id == showArr[i].id) {
          showArr[i] = stuObj;
        }
      }

      // 隐藏修改模态框
      $("#xiugaiDiv").modal("hide");
      showPage(showArr);
      showData(showArr, 1);
    });

    // =============================改变显示的人数=============================
    $("#selectShowPageNum").click(function () {
      let selectshowPageNum = $("#selectShowPageNum").val();

      if (selectshowPageNum == 0) {
        showPageNum = 10;
      } else if (selectshowPageNum == 1) {
        showPageNum = 20;
      } else if (selectshowPageNum == 2) {
        showPageNum = 50;
      }

      showPage(showArr);
      showData(showArr, 1);
    });

    // ==================================跳转==================================
    $("#goPage").click(function () {
      var reg = /^\d{1,}$/;
      if (reg.test($("#goPageNum").val())) {
        if ($("#goPageNum").val() <= maxPage) {
          showPage(showArr);
          showData(showArr, $("#goPageNum").val());
        }
      }
    });
  </script>
</body>

</html>